<template>
  <div class="listBox">
    <a-row class="tableHead" type="flex">
      <a-col span="1">
        <div class="open">
          <span>-</span>
        </div>
      </a-col>
      <a-col v-for="(item, index) in headList" :key="index" :span="item.span">
        {{ item.title }}
      </a-col>
    </a-row>
    <OrderItem
      @handle="(type, item) => $emit('handle', type, item)"
      v-for="item in orderList"
      :list_th="headList"
      :key="item.id"
      :order="item"
    ></OrderItem>
  </div>
</template>

<script>
import OrderItem from './OrderItem.vue'
export default {
  components: {
    OrderItem,
  },
  props: {
    orderList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  data() {
    return {
      headList: [
        { type: 'name', title: '商品信息', span: 6 },
        { type: 'count', title: '商品数量', span: 6 },
        { type: 'status', title: '状态', span: 6 },
        { type: 'created_at', title: '收货时间', span: 5 },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
.listBox {
  width: 100%;
  .tableHead {
    width: 100%;
    height: 54px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
}

.open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 20px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.149);

  span {
    position: relative;
    top: -1px;
  }
}
</style>
